import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import JsBarcode  from 'jsbarcode';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import CouponBg from '../../../public/image/couponbg@2x.png';
import './PlaceOrder.less';
const couponBg={
  width:'85%',
  height:'242px',
  backgroundImage: 'url(' + CouponBg + ')',
  backgroundRepeat: 'no-repeat',
margin:'0 auto',
  backgroundSize: '100% 242px',
  paddingTop:'25px'
}
@connect(() => {
  return ({

  })
})
export default class CouponCode extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      value: localStorage[MI_APP_CODE + "couponCode"],
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: T(localeData[localStorage.locale].coupon3),
        path: location.pathname + location.search
      }
    });

  }
  componentDidMount(){
    this.toJsBarcode()

  }
  toJsBarcode = () =>{
    // 调用 JsBarcode方法生成条形码
    JsBarcode(document.getElementById('barcode'), this.state.value, {
      text :localStorage[MI_APP_CODE + "couponCode"],
      displayValue : true,
      width : 2,
      height : 80,
      margin : 5,
    });
    console.log('111', JsBarcode)
  }
  render(){
    let {dispatch} = this.props;
    let {img,img1} = this.state;
    const messages = localeData[localStorage.locale];
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
     <div style={{height:"100%",}} className="couponBg">
       <div style={{paddingTop:'125px'}}>
          <div style={couponBg}>

            <p style={{
              fontSize: '17px',
              fontWeight: 500,
              color: '#303133',
              textAlign:'center',
              padding:'0px 32px'
             }}>{messages.coupon2}</p>
            <div style={{width:'67%',height:'1px',background:'#DDE3F1',margin:'0 auto'}}></div>
            <div style={{width:'71%',margin:'40px auto'}}>
              <svg
                id="barcode"
              />
            </div>

          </div>

       </div>
      </div>
      </IntlProvider>
    )
  }
}
